<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="formInline" ref="formInline" label-width="40px">
                     <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="省份" prop="provinceId">
                                <province v-model="formInline.provinceId"></province>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="市区" prop="cityId">
                                <city v-model="formInline.cityId" :province="formInline.provinceId"></city>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="区县" prop="areaId">
                                <region v-model="formInline.areaId" :city="formInline.cityId"></region>
                            </el-form-item>
                        </el-col>
                    </el-row> 
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="学校">
                                <school v-model="formInline.schoolName" :provinceId="formInline.provinceId" :cityId="formInline.cityId" :areaId="formInline.areaId" style="width:100%"
                                @change='schoolChange'></school>
                             </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="日期"> 
                             <el-row>
                                <el-col :span="11">
                                    <el-date-picker v-model="formInline.giveTimeStart" :clearable='true' :editable="false" type="date" placeholder="选择开始日期" 
                                    :picker-options="formInline.pickerOptions1" 
                                    @change="startDateChange" style="width:100%">
                                  </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">-</el-col>
                                <el-col :span="11">
                                    <el-date-picker v-model="formInline.giveTimeEnd" :clearable='true' :editable="false" type="date" placeholder="选择结束日期" 
                                    :picker-options="formInline.pickerOptions2" 
                                     @change="endDateChange" style="width:100%">
                                   </el-date-picker>
                                </el-col>
                            </el-row>                      
                        </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="7">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="submit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="table">
                <div class="table-title"><exportExcel v-on:ee="exportExcel()"></exportExcel></div> 
                <el-table  border style="width: 100%" :data="AnnounceList" v-loading="loading"  @sort-change="sortChange">
                    <el-table-column align="center" sortable="custom" label="布置人数" prop="releaseHomeWorkBtnUser">
                        <template scope="scope">
                            <span>{{ scope.row.releaseHomeWorkBtnUser | isNull }}</span> 
                        </template>
                    </el-table-column>
                    <el-table-column align="center" sortable="custom" label="布置次数" prop="releaseHomeWorkBtnNumber ">
                        <template scope="scope">
                            <span>{{ scope.row.releaseHomeWorkBtnNumber | isNull }}</span>
                        </template> 
                    </el-table-column>
                    <el-table-column align="center" label="提交人数">
                        <template scope="scope">
                            <span>{{ scope.row.commitHomeWorkUser | isNull }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="提交次数">
                            <template scope="scope">
                            <span>{{ scope.row.commitHomeWorkNumber | isNull }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  label="学校名称">
                        <template scope="scope">
                            <span>{{ scope.row.moduleName | isNull }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  label="学校类型">
                        <template scope="scope">
                            <span>{{ scope.row.userTypeName | isNull }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  label="区域">
                        <template scope="scope">
                            <span>{{ scope.row.areaName | isNull }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  label="城市">
                        <template scope="scope">
                            <span>{{ scope.row.cityName | isNull }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  label="省份">
                        <template scope="scope">
                            <span>{{ scope.row.provinceName | isNull }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container" style="text-align:right">
                    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" 
                    :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import moment from 'moment';
    import exportExcel from 'components/ExportExcel/index'; 
    import school from 'components/SchoolClasss/school';
    import { selectHomeWork } from 'api/manageAnalysis';

    export default{
        components: {school, exportExcel, province, city, region, echartsLayout},
        data() {
            return {
                formState: false,
                dataListState: true,
                eCharts1State: true,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                formInline: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    schoolName: '',
                    schoolId: '',
                    giveTimeStart: '',
                    giveTimeEnd: '',
                    pickerOptions1: {
                        disabledDate(time) {
                            return (time.getTime()) > (Date.now());
                        }
                    },
                    pickerOptions2: {
                        disabledDate(time) {
                            return (time.getTime()) > (Date.now());
                        }
                    }
                },
                loading: false,
                AnnounceList: [],
                listQuery: {// 分页
                    page: 1,
                    total: 0
                },
                peopleNumState: '1',
                numState: ''
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        created() {
            this.searchFetchData()
        },
        methods: {
            // 全局获取行数
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.listQuery.page = 1;
                this.ChangePageSize(val);
                this.searchFetchData();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.searchFetchData();
            },
            submit() {
                this.listQuery.page = 1;
                this.searchFetchData()
            },
            schoolChange(val) {
                this.formInline.schoolId = val;
            },
            sortChange({ column, prop, order }) {
               
                if (prop == 'releaseHomeWorkBtnUser') {
                    this.numState = '';
                    if (order=='ascending') {
                        this.peopleNumState = '0';
                    } else {
                        this.peopleNumState = '1';
                    }
                } else {
                    this.peopleNumState = '';
                    if (order=='ascending') {
                        this.numState = '0';
                    } else {
                        this.numState = '1';
                    }
                }
              
                // this.peopleNumState = prop != 'releaseHomeWorkBtnUser'?'':order=='ascending'?'0':'1';
                // this.numState = prop != 'releaseHomeWorkBtnNumber'?'':order=='ascending'?'0':'1';
              
                this.searchFetchData();
            },
            searchFetchData() {
                let numStatus = this.numState; // "1"（必填默认按布置次数倒序，升序“0”降序“1”）,
                let peopleNumStatus = this.peopleNumState; // "0"(布置人数排序),
                let provinceId = this.formInline.provinceId; // "学校的省id"（）,
                let cityId = this.formInline.cityId; // "学校的市id",
                let areaId = this.formInline.areaId; // "学校的区id",
                let schoolId = this.formInline.schoolId; // "学校id"      
                let startTime = this.formInline.giveTimeStart?moment(new Date(this.formInline.giveTimeStart)).format('YYYY-MM-DD'):'';
                let endTime = this.formInline.giveTimeEnd?moment(new Date(this.formInline.giveTimeEnd)).format('YYYY-MM-DD'):'';

                this.loading = true;
                selectHomeWork(this.listQuery.page, this.config.pageSize, numStatus, peopleNumStatus, provinceId, cityId, areaId, schoolId, startTime, endTime).then(res => {
                    this.loading = false;
                    this.AnnounceList = res.data.content.list;
                    this.listQuery.total = res.data.content.pagination.total;
                }).catch(() => {
                    this.loading = false;
                });
            },

            exportExcel() {
                let numStatus = this.numState; // "1"（必填默认按布置次数倒序，升序“0”降序“1”）,
                let peopleNumStatus = this.peopleNumState; // "0"(布置人数排序),
                let provinceId = this.formInline.provinceId; // "学校的省id"（）,
                let cityId = this.formInline.cityId; // "学校的市id",
                let areaId = this.formInline.areaId; // "学校的区id",
                let schoolId = this.formInline.schoolId; // "学校id"      
                let startTime = this.formInline.giveTimeStart?moment(new Date(this.formInline.giveTimeStart)).format('YYYY-MM-DD'):'';
                let endTime = this.formInline.giveTimeEnd?moment(new Date(this.formInline.giveTimeEnd)).format('YYYY-MM-DD'):'';
                
                window.location.href = `${LOCAL_API.cm}/report/exportHomeWork?numStatus=${numStatus}&peopleNumStatus=${peopleNumStatus}&provinceId=${provinceId}&cityId=${cityId}&areaId=${areaId}&schoolId=${schoolId}&startTime=${startTime}&endTime=${endTime}`;
               
            },
            
            startDateChange(date) {
                this.formInline.pickerOptions2 = {
                    disabledDate(time) {
                        return (time.getTime() < (new Date(date).getTime() - 864e5)) || (time.getTime() > new Date().getTime());
                    }
                }
            },
            endDateChange(date) {
                if (date) {
                    this.formInline.pickerOptions1 = {
                        disabledDate(time) {
                            return (time.getTime() > new Date(date).getTime());
                        }
                    } 
                } else {
                    this.formInline.pickerOptions1 = {
                        disabledDate(time) {
                            return (time.getTime()) > (Date.now());
                        }
                    }
                }
            }
           
        }
    }
</script>
